<template>
  <el-form :model="detailForm" :label-position="labelPosition" :rules="rules"
           :class="isEdit?'':'formItem'" ref="detailForm">
    <el-card class="box-card" shadow="never">
      <div slot="header">
        <span>出险信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-if='settlementBoole'>
          <el-form-item label="理赔类别：" prop="settlementType">
            <el-radio-group v-if="isEdit" disabled v-model="detailForm.settlementType">
              <el-radio label="1">实物赔付申请</el-radio>
              <el-radio label="2">理赔款支付申请</el-radio>
            </el-radio-group>
            <span v-else>
              <span v-if="detailForm.settlementType == '1'">实物赔付申请</span>
              <span v-if="detailForm.settlementType == '2'">理赔款支付申请</span>
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="理赔类别：" prop="settlementType">
            <el-radio-group v-if="isEdit"  v-model="detailForm.settlementType">
              <el-radio label="1">实物赔付申请</el-radio>
              <el-radio label="2">理赔款支付申请</el-radio>
            </el-radio-group>
            <span v-else>
              <span v-if="detailForm.settlementType == '1'">实物赔付申请</span>
              <span v-if="detailForm.settlementType == '2'">理赔款支付申请</span>
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="被保险人：" prop="insuredName">
            <el-input v-if="isEdit" placeholder="请输入被保险人" v-model="detailForm.insuredName" />
            <span v-else>{{ detailForm.insuredName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶员：" prop="driverName">
            <el-input v-if="isEdit" placeholder="请输入驾驶员" v-model="detailForm.driverName"></el-input>
            <span v-else>{{detailForm.driverName}}</span>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="责任类型：" prop="responsibilityType">
            <el-select v-model="detailForm.responsibilityType" placeholder="选择责任类型" style="width: 100%;" v-if="isEdit">
              <el-option v-for="item in dict.type.responsibility_type" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span v-else>{{ handleCcomputed(dict.type.responsibility_type, detailForm.responsibilityType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任方保险公司名称：" prop="responsibleInsuranceUnitName">
            <el-input v-if="isEdit" placeholder="请输入责任方保险公司名称" v-model="detailForm.responsibleInsuranceUnitName"></el-input>
            <span v-else>{{detailForm.responsibleInsuranceUnitName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故类型：" prop="accidentType">
            <el-select v-model="detailForm.accidentType" placeholder="选择事故类型" style="width: 100%;" v-if="isEdit"
              @change="handleAccidentType">
              <el-option v-for="item in dict.type.accident_type" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span v-else>{{ selectDictLabel(dict.type.accident_type, detailForm.accidentType) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="出险地点：" prop="accidentLocation">
            <el-input v-if="isEdit"  placeholder="请输入出险地点" v-model="detailForm.accidentLocation"></el-input>
            <span v-else>{{detailForm.accidentLocation}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有人伤：" prop="humanInjury">
            <el-select v-model="detailForm.humanInjury" placeholder="选择是否有人伤" style="width: 100%;" v-if="isEdit">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
            <span v-else>{{
                detailForm.humanInjury == "1" ? '是' : detailForm.humanInjury ==
                "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报案时间：" prop="reportingCaseTime">
            <el-date-picker type="date" v-model="detailForm.reportingCaseTime" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择报案时间">
            </el-date-picker>
            <span v-else>{{ detailForm.reportingCaseTime }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="报案号：" prop="reportingCaseNum">
            <el-input v-model="detailForm.reportingCaseNum" v-if="isEdit" placeholder="请输入报案号" />
              <span v-else>{{ detailForm.reportingCaseNum }}</span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "beDangerInfo", //出险信息
  dicts: ["accident_type", "responsibility_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
    settlementBoole:{
      type: Boolean,
      default: true,
    }
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key, value) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.state === 'write') {
        return "top";
      } else {
        return "right";
      }
    },
    handleCcomputed() {
      return function (objData, val) {
        let label = "";
        let index = objData.findIndex((a) => a.value == val);
        if (index !== -1) {
          label = objData[index].label;
        }
        return label;
      };
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {},
  data() {
    return {
      rules: {
        settlementType: [
          {
            required: this.state === 'write',
            message: "请选择理赔类别",
            trigger: "change",
          },
        ],
        insuredName: [{required: this.state === 'write', message: '请输入被保险人', trigger: 'blur'}],
        driverName: [{required: this.state === 'write', message: '请输入驾驶员', trigger: 'blur'}],
        responsibilityType: [{required: this.state === 'write', message: '请选择责任类型', trigger: 'change'}],
        responsibleInsuranceUnitName: [{
          required: this.state === 'write',
          message: '输入责任方保险公司名称',
          trigger: 'blur'
        }],
        accidentType: [{required: this.state === 'write', message: '请选择事故类型', trigger: 'change'}],
        accidentLocation: [{required: this.state === 'write', message: '请输入出险地点', trigger: 'blur'}],
        humanInjury: [{required: this.state === 'write', message: '选择是否有人伤', trigger: 'change'}],
        reportingCaseTime: [{required: this.state === 'write', message: '请选择报案时间', trigger: 'change'}],
        reportingCaseNum:[{required: this.state === 'write', message: '请输入报案号', trigger: 'blur'}],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleAccidentType() {

    },
    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            this.locateToErr()
            reject();
          }
        });
      })
    },

    locateToErr() {

      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: 'center',
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: 'smooth',
        })
      })
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>


